/* =============================================== */
/* CSS for control sap.ui.unified/ContentSwitcher  */
/* Base theme                                      */
/* =============================================== */

.sapUiUfdCSwitcher {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sapUiUfdCSwitcher > section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Unanimated */

.sapUiUfdCSwitcherContent {
	display: none;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
}

.sapUiUfdCSwitcherVisible {
	display: block;
}


/* Fade animation */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationFade > section {
	display: block;
	opacity: 0;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	transition: opacity 500ms ease 0s;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationFade .sapUiUfdCSwitcherVisible {
	display: block;
	opacity: 1;
	z-index: 1;
}


/* Slide over Left animation  */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationSlideOver > section {
	display: block;
	left: -100%;
	top: 0%;
	width: 100%;
	height: 100%;
	transition: left 500ms ease 0ms, right 500ms ease 0ms;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationSlideOver .sapUiUfdCSwitcherVisible {
	display: block;
	left: 0;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationSlideOver section.sapUiUfdCSwitcherContent1.visible {
	transition: left 0ms ease 500ms, right 0ms ease 500ms;
	left: 0;
}


/* Slide Right animation */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationSlideRight > section {
	display: block;
	left: -100%;
	z-index: 1;
	transition: left 0ms ease 500ms, right 0ms ease 500ms;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationSlideRight .sapUiUfdCSwitcherVisible {
	display: block;
	left: 0;
	z-index: 2;
	transition: left 500ms ease 0ms, right 500ms ease 0ms;
}


/* Zoom Out animation */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationZoomOut > section {
	display: block;
	left: 50%;
	top: 50%;
	width: 0%;
	height: 0%;
	z-index: 1;
	opacity: 0;
	transition: 		left 500ms ease 0ms,
						right 500ms ease 0ms,
						top 500ms ease 0ms,
						width 500ms ease 0ms,
						height 500ms ease 0ms,
						z-index 0ms ease 500ms,
						opacity 500ms ease 0ms;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationZoomOut .sapUiUfdCSwitcherVisible {
	display: block;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 1;
	transition: 		left 0ms ease 0ms,
						right 0ms ease 0ms,
						top 0ms ease 0ms,
						width 0ms ease 0ms,
						height 0ms ease 0ms,
						z-index 0ms ease 500ms;
}


/* Zoom Out animation */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationZoomIn > section {
	display: block;
	left: 50%;
	top: 50%;
	width: 0%;
	height: 0%;
	z-index: 1;
	opacity: 0;
	transition: 		left 0ms ease 500ms,
						right 0ms ease 500ms,
						top 0ms ease 500ms,
						width 0ms ease 500ms,
						height 0ms ease 500ms,
						opacity 0ms ease 500ms,
						z-index 0ms ease 0ms;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationZoomIn .sapUiUfdCSwitcherVisible {
	display: block;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 1;
	transition: 		left 500ms ease 0ms,
						right 500ms ease 0ms,
						top 500ms ease 0ms,
						width 500ms ease 0ms,
						height 500ms ease 0ms,
						opacity 500ms ease 0ms;
}


/* Rotate Animation */

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationRotate > section {
	display: block;
	left: 50%;
	top: 50%;
	width: 0%;
	height: 0%;
	z-index: 1;
	opacity: 0;
	transition: 		left 0ms linear 500ms,
						right 0ms linear 500ms,
						top 0ms linear 500ms,
						width 0ms linear 500ms,
						height 0ms linear 500ms,
						opacity 0ms linear 500ms,
						transform 0ms linear 500ms,
						z-index 0ms linear 0ms;
	-webkit-transition: left 0ms linear 500ms,
						right 0ms linear 500ms,
						top 0ms linear 500ms,
						width 0ms linear 500ms,
						height 0ms linear 500ms,
						opacity 0ms linear 500ms,
						-webkit-transform 0ms linear 500ms,
						z-index 0ms linear 0ms;
}

.sapUiUfdCSwitcher.sapUiUfdCSwitcherAnimationRotate .sapUiUfdCSwitcherVisible {
	display: block;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 1;
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transition: 		left 500ms linear 0ms,
						right 500ms linear 0ms,
						top 500ms linear 0ms,
						width 500ms linear 0ms,
						height 500ms linear 0ms,
						opacity 500ms linear 0ms,
						transform 500ms linear 0ms;
	-webkit-transition: left 500ms linear 0ms,
						right 500ms linear 0ms,
						top 500ms linear 0ms,
						width 500ms linear 0ms,
						height 500ms linear 0ms,
						opacity 500ms linear 0ms,
						-webkit-transform 500ms linear 0ms;
}